<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-position="top">
      <!--是否开启积分  -->
      <el-form-item
        label="是否开启积分"
        prop="integralFlag"
        class="position-integralActivity-card"
      >
        <el-switch
          class="position-switch"
          v-model="form.integralFlag"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </el-form-item>

      <div v-show="form.integralFlag == 1">
        <!-- 油品积分获取规则 -->
        <el-form-item
          label="油品积分获取规则"
          prop="oilIntegralFlag"
          v-show="form.integralFlag == 1"
          class="position-integralActivity-card"
        >
          <label slot="label"
            ><span style="color: red">*</span> 油品积分获取规则</label
          >
          <el-switch
            class="position-card"
            v-model="form.oilIntegralFlag"
            active-value="1"
            inactive-value="0"
            @change="changeOilIntegralFlag"
          >
          </el-switch>
        </el-form-item>

        <!-- 油品积分获取规则 -->
        <el-row class="flex_box">
          <el-col
            class="flex_item"
            v-for="(item, index) in form.itemsDetail"
            :key="index"
          >
            <el-form-item
              :prop="`itemsDetail.${index}`"
              :rules="[
                {
                  required: true,
                  validator: validateItemsDetail,
                  trigger: ['change', 'blur'],
                },
              ]"
              v-show="form.oilIntegralFlag == 1"
            >
              <el-card class="intRule f_item">
                <div style="display: flex">
                  <div style="flex: 1">
                    <!-- 适用油品 -->
                    <div style="margin-bottom: 5px; display: flex">
                      <div style="width: 71px">适用油品</div>
                      <el-select
                        v-model="item.oilId"
                        placeholder="请选择油品"
                        clearable
                        size="small"
                        @change="oilNameChang(item, index)"
                      >
                        <el-option
                          v-for="ele in oilNameOptions"
                          :key="ele.oilId"
                          :label="ele.oilName"
                          :value="ele.oilId"
                        ></el-option>
                      </el-select>
                    </div>

                    <!-- 规则类型 -->
                    <div
                      v-if="item.oilType != 3"
                      style="display: flex; align-items: center"
                    >
                      <div style="width: 71px; height: 55px">规则类型</div>

                      <el-radio-group v-model="item.ruleType">
                        <el-radio label="1">以订单实付累计</el-radio>
                        <el-radio label="2">以订单应付累计</el-radio>
                        <el-radio label="3">以加油升数累计</el-radio>
                      </el-radio-group>
                    </div>

                    <div style="margin-bottom: 5px; display: flex">
                      <div style="margin-left: 45px">满</div>
                      <el-input-number
                        style="width: 150px; margin: 0px 12px"
                        v-model="item.ruleTerms"
                        :min="0"
                        size="small"
                      />
                      元（L） 开始积分
                    </div>

                    <div style="margin-bottom: 5px; display: flex">
                      <div style="margin-left: 15px">每消费</div>
                      <el-input-number
                        style="width: 150px; margin: 0px 13px"
                        v-model="item.saleAmt"
                        size="small"
                        :min="0"
                      />元
                    </div>

                    <div style="margin-bottom: 5px; display: flex">
                      <div style="margin-left: 30px">获得</div>
                      <el-input-number
                        style="width: 150px; margin: 0px 12px"
                        v-model="item.integral"
                        size="small"
                        :min="0"
                      />积分
                    </div>

                    <div style="margin-bottom: 5px; display: flex">
                      <div style="margin-left: 30px">获得</div>
                      <el-input-number
                        style="width: 150px; margin: 0px 12px"
                        v-model="item.growValue"
                        :min="0"
                        size="small"
                      />成长值
                    </div>

                    <!--   生效时间 -->
                    <div style="margin-bottom: 5px">
                      生效时间
                      <el-radio-group
                        v-model="item.effectiveTimeType"
                        style="margin-left: 11px; margin-top: 5px"
                        @input="inputRadio(index, 'itemsDetail')"
                      >
                        <el-radio label="permanent_validity">永久有效</el-radio>
                        <el-radio label="specify_time">指定时间</el-radio>
                        <el-radio label="daily_repeat">每日重复</el-radio>
                        <el-radio label="weekly_repeat">每周重复</el-radio>
                        <el-radio label="monthly_repeat">每月重复</el-radio>
                      </el-radio-group>
                      <div
                        v-if="
                          item.effectiveTimeType !== 'permanent_validity' &&
                          item.effectiveTimeType
                        "
                        style="
                          background-color: #f5f7fa;
                          width: 100%;
                          margin-left: 70px;
                          padding: 10px 10px 10px 20px;
                          display: flex;
                        "
                      >
                        <div style="width: 70px">周期规则：</div>
                        <div
                          style="
                            display: flex;
                            flex-direction: column;
                            width: 150px;
                          "
                        >
                          <!-- 每周重复 -->
                          <el-checkbox-group
                            v-if="item.effectiveTimeType === 'weekly_repeat'"
                            v-model="item.weeklySelection"
                            size="small"
                            style="width: 350px"
                          >
                            <el-checkbox-button
                              v-for="city in weeklySelection"
                              :label="city"
                              :key="city"
                              >{{ city }}</el-checkbox-button
                            >
                          </el-checkbox-group>

                          <!-- 每月重复 -->
                          <el-checkbox-group
                            v-if="item.effectiveTimeType === 'monthly_repeat'"
                            v-model="item.monthlySelection"
                            size="small"
                            style="width: 350px"
                          >
                            <el-checkbox-button
                              v-for="city in monthlySelection"
                              :label="city"
                              :key="city"
                              >{{ city }}</el-checkbox-button
                            >
                          </el-checkbox-group>
                          <div
                            style="width: 700px; display: flex; margin-top: 5px"
                            v-if="item.effectiveTimeType === 'specify_time'"
                            v-for="(
                              details, indexDetails
                            ) in item.integralTimeRuleDetails"
                          >
                            <el-date-picker
                              value-format="yyyy-MM-dd HH:mm:ss"
                              style="width: 330px; margin-right: 20px"
                              size="small"
                              v-model="details.datetime"
                              type="datetimerange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="changeDatetime(index)"
                            >
                            </el-date-picker>
                            <el-button
                              style="width: 30px; height: 30px"
                              size="mini"
                              icon="el-icon-minus"
                              circle
                              v-if="
                                indexDetails != 0 ||
                                item.integralTimeRuleDetails.length > 1
                              "
                              @click="
                                minusButton(index, indexDetails, 'itemsDetail')
                              "
                            ></el-button>
                            <el-button
                              style="width: 30px; height: 30px"
                              size="mini"
                              icon="el-icon-plus"
                              circle
                              v-if="
                                indexDetails + 1 ===
                                item.integralTimeRuleDetails.length
                              "
                              @click="plusButton(index, 'itemsDetail')"
                            ></el-button>
                          </div>
                          <div
                            v-for="(
                              details, indexDetails
                            ) in item.integralTimeRuleDetails"
                            style="width: 700px; display: flex; margin-top: 5px"
                            v-if="
                              item.effectiveTimeType === 'monthly_repeat' ||
                              item.effectiveTimeType === 'weekly_repeat' ||
                              item.effectiveTimeType === 'daily_repeat'
                            "
                          >
                            <el-time-picker
                              style="width: 330px; margin-right: 20px"
                              is-range
                              size="small"
                              value-format="HH:mm:ss"
                              v-model="details.time"
                              range-separator="至"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间"
                              placeholder="选择时间范围"
                              @change="changeTime(index)"
                            >
                            </el-time-picker>
                            <el-button
                              style="width: 30px; height: 30px"
                              size="mini"
                              icon="el-icon-minus"
                              circle
                              v-if="
                                indexDetails != 0 ||
                                item.integralTimeRuleDetails.length > 1
                              "
                              @click="
                                minusButton(index, indexDetails, 'itemsDetail')
                              "
                            ></el-button>
                            <el-button
                              style="width: 30px; height: 30px"
                              size="mini"
                              icon="el-icon-plus"
                              circle
                              v-if="
                                indexDetails + 1 ===
                                item.integralTimeRuleDetails.length
                              "
                              @click="plusButton(index, 'itemsDetail')"
                            ></el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!--新增 删除 -->
                  <div class="add-danger">
                    <el-button
                      v-show="index == form.itemsDetail.length - 1"
                      type="primary"
                      @click="addItemItemsDetail()"
                      size="small"
                      style="margin-left: 10px; margin-bottom: 10px"
                      >新增</el-button
                    >

                    <el-button
                      @click="delItem(index, 'itemsDetail')"
                      size="small"
                      >删除</el-button
                    >
                  </div>
                </div>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 非油商品积分获取规则 -->
        <el-form-item
          label="非油商品积分获取规则"
          prop="noOilIntegralFlag"
          v-show="form.integralFlag == 1"
          class="position-integralActivity-card"
        >
          <label slot="label"
            ><span style="color: red">*</span> 非油商品积分获取规则</label
          >
          <el-switch
            class="position-card"
            v-model="form.noOilIntegralFlag"
            active-value="1"
            inactive-value="0"
            @change="changeNoOilIntegralFlag"
          >
          </el-switch>
        </el-form-item>

        <!-- 非油商品积分获取规则 -->

        <el-row class="flex_box">
          <el-col
            class="flex_item"
            v-for="(item, index) in form.noOilItemsDetail"
            :key="index"
          >
            <el-form-item
              :prop="`noOilItemsDetail.${index}`"
              :rules="[
                {
                  required: true,
                  validator: validateNonOilItemsDetail,
                  trigger: ['change', 'blur'],
                },
              ]"
              v-show="form.noOilIntegralFlag == 1"
            >
              <el-card class="intRule">
                <div style="display: flex">
                  <div style="flex: 1">
                    <!-- 适用油站 -->
                    <div style="margin-bottom: 5px; display: flex">
                      <div style="width: 71px">适用油站</div>
                      <el-select
                        v-model="item.stationId"
                        placeholder="请选择油站"
                        clearable
                        size="small"
                        @change="stationIdChang(item, index)"
                      >
                        <el-option
                          v-for="item in stationList"
                          :key="item.stationId"
                          :label="item.stationName"
                          :value="item.stationId"
                        >
                        </el-option>
                      </el-select>
                    </div>

                    <!-- 适用分类 使用商品 -->
                    <div class="intRule-oi">
                      <!-- 适用分类 -->
                      <div class="intRule-oidiv">
                        <div style="width: 71px; line-height: 50px">
                          适用分类
                        </div>

                        <el-cascader
                          v-model="item.categoryId"
                          :options="categoryOptions[index]"
                          :props="{
                            checkStrictly: true,
                            label: 'categoryName',
                            value: 'categoryId',
                            children: 'children',
                          }"
                          clearable
                          size="small"
                          @change="handleChange($event, item, index)"
                        ></el-cascader>
                      </div>

                      <!--  适用商品 -->
                      <div class="intRule-oidiv">
                        <div style="width: 71px; line-height: 50px">
                          适用商品
                        </div>

                        <el-select
                          size="small"
                          clearable
                          v-model="item.commodityId"
                          placeholder="请选择适用商品"
                        >
                          <el-option
                            v-for="item in goodList[index]"
                            :label="item.commodityName"
                            :value="item.commodityId"
                            :key="item.commodityId"
                          ></el-option>
                        </el-select>
                      </div>
                    </div>

                    <!-- 规则类型 -->
                    <div
                      v-if="item.oilType != 3"
                      style="display: flex; align-items: center"
                    >
                      <div style="width: 71px; height: 55px">规则类型</div>

                      <el-radio-group v-model="item.ruleType">
                        <el-radio label="1">以订单实付累计</el-radio>
                        <el-radio label="2">以订单应付累计</el-radio>
                        <el-radio label="4">以商品单位数累讦</el-radio>
                      </el-radio-group>
                    </div>

                    <div style="margin-bottom: 5px; display: flex">
                      <div style="margin-left: 45px">满</div>
                      <el-input-number
                        style="width: 150px; margin: 0px 12px"
                        v-model="item.ruleTerms"
                        :min="0"
                        size="small"
                      />
                      元（L） 开始积分
                    </div>

                    <div style="margin-bottom: 5px; display: flex">
                      <div style="margin-left: 15px">每消费</div>
                      <el-input-number
                        style="width: 150px; margin: 0px 13px"
                        v-model="item.saleAmt"
                        size="small"
                        :min="0"
                      />元
                    </div>

                    <div style="margin-bottom: 5px; display: flex">
                      <div style="margin-left: 30px">获得</div>
                      <el-input-number
                        style="width: 150px; margin: 0px 12px"
                        v-model="item.integral"
                        size="small"
                        :min="0"
                      />积分
                    </div>

                    <div style="margin-bottom: 5px; display: flex">
                      <div style="margin-left: 30px">获得</div>
                      <el-input-number
                        style="width: 150px; margin: 0px 12px"
                        v-model="item.growValue"
                        :min="0"
                        size="small"
                      />成长值
                    </div>

                    <!--   生效时间 -->
                    <div style="margin-bottom: 5px">
                      生效时间
                      <el-radio-group
                        v-model="item.effectiveTimeType"
                        style="margin-left: 11px; margin-top: 5px"
                        @input="inputRadio(index, 'noOilItemsDetail')"
                      >
                        <el-radio label="permanent_validity">永久有效</el-radio>
                        <el-radio label="specify_time">指定时间</el-radio>
                        <el-radio label="daily_repeat">每日重复</el-radio>
                        <el-radio label="weekly_repeat">每周重复</el-radio>
                        <el-radio label="monthly_repeat">每月重复</el-radio>
                      </el-radio-group>
                      <div
                        v-if="
                          item.effectiveTimeType !== 'permanent_validity' &&
                          item.effectiveTimeType
                        "
                        style="
                          background-color: #f5f7fa;
                          width: 100%;
                          margin-left: 70px;
                          padding: 10px 10px 10px 20px;
                          display: flex;
                        "
                      >
                        <div style="width: 70px">周期规则：</div>
                        <div
                          style="
                            display: flex;
                            flex-direction: column;
                            width: 150px;
                          "
                        >
                          <!-- 每周重复 -->
                          <el-checkbox-group
                            v-if="item.effectiveTimeType === 'weekly_repeat'"
                            v-model="item.weeklySelection"
                            size="small"
                            style="width: 350px"
                          >
                            <el-checkbox-button
                              v-for="city in weeklySelection"
                              :label="city"
                              :key="city"
                              >{{ city }}</el-checkbox-button
                            >
                          </el-checkbox-group>

                          <!-- 每月重复 -->
                          <el-checkbox-group
                            v-if="item.effectiveTimeType === 'monthly_repeat'"
                            v-model="item.monthlySelection"
                            size="small"
                            style="width: 350px"
                          >
                            <el-checkbox-button
                              v-for="city in monthlySelection"
                              :label="city"
                              :key="city"
                              >{{ city }}</el-checkbox-button
                            >
                          </el-checkbox-group>
                          <div
                            style="width: 700px; display: flex; margin-top: 5px"
                            v-if="item.effectiveTimeType === 'specify_time'"
                            v-for="(
                              details, indexDetails
                            ) in item.integralTimeRuleDetails"
                          >
                            <el-date-picker
                              value-format="yyyy-MM-dd HH:mm:ss"
                              style="width: 330px; margin-right: 20px"
                              size="small"
                              v-model="details.datetime"
                              type="datetimerange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="changeDatetime(index)"
                            >
                            </el-date-picker>
                            <el-button
                              style="width: 30px; height: 30px"
                              size="mini"
                              icon="el-icon-minus"
                              circle
                              v-if="
                                indexDetails != 0 ||
                                item.integralTimeRuleDetails.length > 1
                              "
                              @click="
                                minusButton(
                                  index,
                                  indexDetails,
                                  'noOilItemsDetail'
                                )
                              "
                            ></el-button>
                            <el-button
                              style="width: 30px; height: 30px"
                              size="mini"
                              icon="el-icon-plus"
                              circle
                              v-if="
                                indexDetails + 1 ===
                                item.integralTimeRuleDetails.length
                              "
                              @click="plusButton(index, 'noOilItemsDetail')"
                            ></el-button>
                          </div>
                          <div
                            v-for="(
                              details, indexDetails
                            ) in item.integralTimeRuleDetails"
                            style="width: 700px; display: flex; margin-top: 5px"
                            v-if="
                              item.effectiveTimeType === 'monthly_repeat' ||
                              item.effectiveTimeType === 'weekly_repeat' ||
                              item.effectiveTimeType === 'daily_repeat'
                            "
                          >
                            <el-time-picker
                              style="width: 330px; margin-right: 20px"
                              is-range
                              size="small"
                              value-format="HH:mm:ss"
                              v-model="details.time"
                              range-separator="至"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间"
                              placeholder="选择时间范围"
                              @change="changeTime(index)"
                            >
                            </el-time-picker>
                            <el-button
                              style="width: 30px; height: 30px"
                              size="mini"
                              icon="el-icon-minus"
                              circle
                              v-if="
                                indexDetails != 0 ||
                                item.integralTimeRuleDetails.length > 1
                              "
                              @click="
                                minusButton(
                                  index,
                                  indexDetails,
                                  'noOilItemsDetail'
                                )
                              "
                            ></el-button>
                            <el-button
                              style="width: 30px; height: 30px"
                              size="mini"
                              icon="el-icon-plus"
                              circle
                              v-if="
                                indexDetails + 1 ===
                                item.integralTimeRuleDetails.length
                              "
                              @click="plusButton(index, 'noOilItemsDetail')"
                            ></el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!--新增 删除 -->
                  <div class="add-danger">
                    <el-button
                      v-show="index == form.noOilItemsDetail.length - 1"
                      type="primary"
                      @click="addItemNoOilItemsDetail()"
                      size="small"
                      style="margin-left: 10px; margin-bottom: 10px"
                      >新增</el-button
                    >

                    <el-button
                      @click="delItem(index, 'noOilItemsDetail')"
                      size="small"
                      >删除</el-button
                    >
                  </div>
                </div>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 积分有效期 -->
        <el-card class="div-card div-card-margin">
          <el-form-item
            label="积分有效期"
            prop="integralTermSetting"
            :required="form.integralFlag == 1"
          >
            <div class="div-integralFlag">
              <el-radio-group v-model="form.integralTermSetting">
                <el-radio label="1">永久有效</el-radio>
                <el-radio label="2">指定清空积分时间</el-radio>
              </el-radio-group>
              <div
                v-show="form.integralTermSetting == 2"
                style="margin: 0px 0px 10px 35px"
              >
                <el-date-picker
                  clearable
                  size="small"
                  placeholder="请选择日期时间"
                  v-model="form.integralEmptyTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </div>
            </div>
          </el-form-item>
        </el-card>

        <!-- 积分商城商品展示样式 -->
        <el-card class="div-card div-card-margin">
          <el-form-item
            label="积分商城商品展示样式"
            prop="showType"
            :required="true"
          >
            <el-radio-group v-model="form.showType">
              <el-radio label="1">单排展示</el-radio>
              <el-radio label="2">双排展示</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-card>

        <!-- 多倍积分 -->
        <el-card class="div-card div-card-margin">
          <el-form-item
            label="多倍积分"
            prop="integralActivity"
            :required="form.integralFlag == 1"
            class="position-integralActivity-card"
          >
            <el-switch
              v-model="form.integralActivity"
              active-value="1"
              inactive-value="0"
              class="position-card"
            >
            </el-switch>
          </el-form-item>

          <el-form-item
            label="积分比例"
            prop="integralProportion"
            v-show="form.integralActivity == 1"
            :required="form.integralActivity == 1"
            class="position-integralActivity-card"
          >
            <el-input-number
              v-model="form.integralProportion"
              :min="1"
              placeholder="请输入加倍比例"
              size="small"
              class="position-card"
            />
            <span class="position-card">倍</span>
          </el-form-item>

          <el-form-item
            prop="datePicker"
            :required="form.integralActivity == 1"
            v-show="form.integralActivity == 1"
          >
            <el-radio-group v-model="form.datePicker" @input="timeClear">
              <el-radio label="1">每周指定日</el-radio>
              <el-radio label="2">每月指定日</el-radio>
              <el-radio label="3">固定活动日</el-radio>
            </el-radio-group>
            <div v-show="form.datePicker != 3" class="form-datePicker-div">
              <div
                v-for="(item, index) in timeSelect[form.datePicker]"
                :key="index"
                style="margin: 10px"
                :class="{
                  'form-datePicker-item': true,
                  'form-datePicker-item-true':
                    form.collectClickCalendar.indexOf(index) > -1,
                }"
              >
                <div
                  class="hover-style"
                  style="
                    border-radius: 5px;
                    font-weight: bold;
                    font-size: 12px;
                    cursor: pointer;
                  "
                  @click="clickCalendar(index)"
                >
                  <div>{{ item }}</div>
                </div>
              </div>
            </div>

            <!-- 固定活动日 -->
            <div v-show="form.datePicker == 3" style="margin-top: 20px">
              <el-date-picker
                clearable
                size="small"
                style="margin-left: 10px; width: 300px"
                v-model="form.collectClickDay"
                type="dates"
                value-format="yyyy-MM-dd"
                placeholder="选择提醒时间设置"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </el-card>

        <el-form-item> </el-form-item>
        <el-row v-show="form.integralActivity == 1">
          <el-col :span="8" style=""> </el-col>

          <el-col :span="8"> </el-col>
        </el-row>

        <!-- 积分轮播图 -->
        <el-card class="div-card">
          <el-form-item
            label="积分轮播图"
            prop="imgFileList"
            :rules="{
              required: form.integralFlag == 1,
              message: '标签不能为空,不需要请删除此项',
              trigger: 'blur',
            }"
          >
            <el-upload
              class="avatar-uploader"
              :action="addressUrl"
              :headers="headers"
              multiple
              list-type="picture-card"
              :limit="5"
              :file-list="form.imgFileList"
              accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
              :before-upload="beforeAvatarUpload"
              :on-remove="handleRemove"
              :on-success="handlepaymentSuccess"
            >
              <i class="el-icon-plus"></i>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，最多上传5张且单张图片不超过1M
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-card>
      </div>
    </el-form>

    <!-- 确 定 执 行 -->
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submitForm"
        :disabled="false"
        style="margin-top: 30px"
        >确 定 执 行</el-button
      >
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import { getToken } from "@/utils/auth";
import {
  addRule,
  updateRule,
  oilNameList,
  gradeList,
  listRuleOne,
} from "@/api/integral/rule";
import { queryOilType } from "@/utils/oil";
import { getOilList, addOil, upOil, delOil, oilName } from "@/api/dept";
import { listEnterpriseStation } from "@/api/nonOil/putlntoStorage";
import { getNonOilCategoryTreeApi } from "@/api/nonOil/class";
import { getCommodityListApi } from "@/api/nonOil/goods";

export default {
  name: "Point_Rule",
  data() {
    let validateIntegralTermSetting = (rule, value, callback) => {
      if (!this.form.integralTermSetting) {
        callback(new Error("请选择积分有效期"));
        return;
      }
      if (this.form.integralTermSetting == 2) {
        if (!this.form.integralEmptyTime) {
          callback(new Error("请填写积分指定的到期时间"));
          return;
        }
      }
      callback();
    };

    let validateTermDateManage = (rule, value, callback) => {
      if (!this.form.termDateManage) {
        callback(new Error("请选择积分活动的结束时间"));
        return;
      }
      if (this.form.termDateManage == 2) {
        if (!this.form.emptyDate) {
          callback(new Error("请填写积分活动的结束时间"));
          return;
        }
      }
      callback();
    };

    let validateDatePicker = (rule, value, callback) => {
      if (this.form.integralActivity == 0) {
        callback();
        return;
      }
      if (!this.form.datePicker) {
        callback(new Error("请选择多倍积分的周期类型"));
        return;
      }
      if (this.form.datePicker == 1 || this.form.datePicker == 2) {
        if (this.form.collectClickCalendar.length <= 0) {
          callback(new Error("请选择多倍积分的时间"));
          return;
        }
      }
      if (this.form.datePicker == 3) {
        if (
          this.form.collectClickDay == null ||
          this.form.collectClickDay.length <= 0
        ) {
          callback(new Error("请填写指定的多倍积分日"));
          return;
        }
      }
      callback();
    };

    return {
      weeklySelection: ["1", "2", "3", "4", "5", "6", "7"],
      monthlySelection: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
      oilNameOptions: [],
      dialogImageUrl: "",
      num: 0,
      dialogVisible: false,
      // 表单参数

      // 油站列表
      stationList: [],
      // 所属分类列表
      categoryOptions: [],
      // 商品列表
      goodList: [],

      form: {
        oilIntegralFlag: "1",
        noOilIntegralFlag: "1",
        // 油品积分获取规则
        itemsDetail: [
          {
            // 适用油品
            oilId: null,
            // 规则类型
            ruleType: null,
            // 满 元（L） 开始积分
            ruleTerms: null,
            // 每消费  元
            saleAmt: null,
            // 获得  积分
            integral: null,
            // 获得  成长值
            growValue: null,
            // 生效时间
            effectiveTimeType: "permanent_validity",
            // 生效时间时间段
            integralTimeRuleDetails: [
              {
                time: null,
                datetime: null,
              },
            ],
            monthlySelection: [],
            weeklySelection: [],
          },
        ],
        // 非油商品积分获取规则
        noOilItemsDetail: [
          {
            // 适用油站
            stationId: null,
            // 适用分类
            categoryId: null,
            // 适用商品
            commodityId: null,
            // 规则类型
            ruleType: null,
            // 满 元（L） 开始积分
            ruleTerms: null,
            // 每消费  元
            saleAmt: null,
            // 获得  积分
            integral: null,
            // 获得  成长值
            growValue: null,
            // 生效时间
            effectiveTimeType: "permanent_validity",
            // 生效时间时间段
            integralTimeRuleDetails: [
              {
                time: null,
                datetime: null,
              },
            ],
            monthlySelection: [],
            weeklySelection: [],
          },
        ],

        imgFileList: [],
        collectClickCalendar: [], // 收集固定日期选择的日子
        collectClickDay: [],
      },
      rules: {
        integralFlag: [
          { required: true, message: "请选择是否开启积分", trigger: "change" },
        ],
        integralTermSetting: [
          { validator: validateIntegralTermSetting, trigger: "change" },
        ],
        termDateManage: [
          { validator: validateTermDateManage, trigger: "change" },
        ],
        datePicker: [{ validator: validateDatePicker, trigger: "change" }],
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },

      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "27",
          "28",
          "29",
          "30",
          "31",
        ],
      ],
      addressUrl: process.env.VUE_APP_BASE_API + "/common/upload",
    };
  },
  created() {
    this.init();
  },
  methods: {
    validateItemsDetail(rule, value, callback) {
      if (this.form.integralFlag == "0" || !this.form.integralFlag) {
        callback();
        return;
      }

      if (this.form.oilIntegralFlag == "0" || !this.form.oilIntegralFlag) {
        callback();
        return;
      }

      if (this.form.itemsDetail.length <= 0) {
        callback(new Error("请先配置设置规则"));
        return;
      }

      if (
        !value.oilId ||
        !value.ruleTerms ||
        !value.saleAmt ||
        !value.integral
      ) {
        callback(new Error("请检查规则完整性"));
        return;
      }

      if (value.oilType != 3) {
        if (!value.ruleType) {
          callback(new Error("请检查规则完整性"));
          return;
        }
      }

      if (this.form.itemsDetail.length > 0) {
        // 永久有效 permanent_validity
        // 指定时间 specify_time
        // 每日重复 daily_repeat
        // 每周重复 weekly_repeat
        // 每月重复 monthly_repeat

        if (!value.effectiveTimeType) {
          return callback(new Error("请检查规则完整性"));
        }

        if (value.effectiveTimeType === "specify_time") {
          value.integralTimeRuleDetails.forEach((item) => {
            if (!item.datetime) {
              return callback(new Error("请检查规则完整性"));
            }
          });
        }
        if (
          value.effectiveTimeType === "daily_repeat" ||
          value.effectiveTimeType === "weekly_repeat" ||
          value.effectiveTimeType === "monthly_repeat"
        ) {
          value.integralTimeRuleDetails.forEach((item) => {
            if (!item.time) return callback(new Error("请检查规则完整性"));
          });
        }
        if (value.effectiveTimeType === "weekly_repeat") {
          if (value.weeklySelection.length == 0) {
            return callback(new Error("请检查规则完整性"));
          }
        }
        if (value.effectiveTimeType === "monthly_repeat") {
          if (value.monthlySelection.length == 0) {
            return callback(new Error("请检查规则完整性"));
          }
        }
      }

      callback();
    },

    validateNonOilItemsDetail(rule, value, callback) {
      if (this.form.integralFlag == "0" || !this.form.integralFlag) {
        callback();
        return;
      }

      if (this.form.noOilIntegralFlag == "0" || !this.form.noOilIntegralFlag) {
        callback();
        return;
      }

      if (this.form.noOilItemsDetail.length <= 0) {
        callback(new Error("请先配置设置规则"));
        return;
      }

      if (value.categoryId instanceof Array) {
        if (!value.categoryId.length) {
          callback(new Error("请检查规则完整性"));
          return;
        }
      } else {
        if (!value.categoryId) {
          callback(new Error("请检查规则完整性"));
          return;
        }
      }

      if (
        !value.stationId ||
        !value.ruleTerms ||
        !value.saleAmt ||
        !value.integral
      ) {
        callback(new Error("请检查规则完整性"));
        return;
      }

      if (value.oilType != 3) {
        if (!value.ruleType) {
          callback(new Error("请检查规则完整性"));
          return;
        }
      }

      if (this.form.noOilItemsDetail.length > 0) {
        // 永久有效 permanent_validity
        // 指定时间 specify_time
        // 每日重复 daily_repeat
        // 每周重复 weekly_repeat
        // 每月重复 monthly_repeat

        if (!value.effectiveTimeType) {
          return callback(new Error("请检查规则完整性"));
        }

        if (value.effectiveTimeType === "specify_time") {
          value.integralTimeRuleDetails.forEach((item) => {
            if (!item.datetime) {
              return callback(new Error("请检查规则完整性"));
            }
          });
        }
        if (
          value.effectiveTimeType === "daily_repeat" ||
          value.effectiveTimeType === "weekly_repeat" ||
          value.effectiveTimeType === "monthly_repeat"
        ) {
          value.integralTimeRuleDetails.forEach((item) => {
            if (!item.time) return callback(new Error("请检查规则完整性"));
          });
        }
        if (value.effectiveTimeType === "weekly_repeat") {
          if (value.weeklySelection.length == 0) {
            return callback(new Error("请检查规则完整性"));
          }
        }
        if (value.effectiveTimeType === "monthly_repeat") {
          if (value.monthlySelection.length == 0) {
            return callback(new Error("请检查规则完整性"));
          }
        }
      }

      callback();
    },

    // 油品积分获取规则数据重置
    itemsDetailData() {
      this.form.itemsDetail = [
        {
          // 适用油品
          oilId: null,
          // 规则类型
          ruleType: null,
          // 满 元（L） 开始积分
          ruleTerms: null,
          // 每消费  元
          saleAmt: null,
          // 获得  积分
          integral: null,
          // 获得  成长值
          growValue: null,
          // 生效时间
          effectiveTimeType: "permanent_validity",
          // 生效时间时间段
          integralTimeRuleDetails: [
            {
              time: null,
              datetime: null,
            },
          ],
          monthlySelection: [],
          weeklySelection: [],
        },
      ];
    },

    // 非油商品积分获取规则数据重置
    noOilItemsDetailData() {
      this.form.noOilItemsDetail = [
        {
          // 适用油站
          stationId: null,
          // 适用分类
          categoryId: null,
          // 适用商品
          commodityId: null,
          // 规则类型
          ruleType: null,
          // 满 元（L） 开始积分
          ruleTerms: null,
          // 每消费  元
          saleAmt: null,
          // 获得  积分
          integral: null,
          // 获得  成长值
          growValue: null,
          // 生效时间
          effectiveTimeType: "permanent_validity",
          // 生效时间时间段
          integralTimeRuleDetails: [
            {
              time: null,
              datetime: null,
            },
          ],
          monthlySelection: [],
          weeklySelection: [],
        },
      ];
    },

    //油品积分获取规则开关 '1'开 '0'关
    changeOilIntegralFlag() {
      if (this.form.oilIntegralFlag == "0") return this.itemsDetailData();
      else this.$refs.form.clearValidate();
    },

    //非油商品积分获取规则 '1'开 '0'关
    changeNoOilIntegralFlag() {
      if (this.form.noOilIntegralFlag == "0")
        return this.noOilItemsDetailData();
      else this.$refs.form.clearValidate();
    },

    // 每日每周每月选择了时间
    changeTime(index) {
      this.form = { ...this.form };
      this.$refs["form"].validate((valid) => {});
    },

    // 指定时间选择时间
    changeDatetime(index) {
      this.form = { ...this.form };
      this.$refs["form"].validate((valid) => {});
    },

    // 点击-时间
    minusButton(index, indexDetails, detail) {
      this.form[detail][index].integralTimeRuleDetails.splice(indexDetails, 1);
      this.form = { ...this.form };
      this.$refs["form"].validate((valid) => {});
    },

    // 点击+时间
    plusButton(index, detail) {
      this.form[detail][index].integralTimeRuleDetails.push({
        time: null,
        datetime: null,
      });
      this.form = { ...this.form };
      this.$refs["form"].validate((valid) => {});
    },

    //生效时间
    inputRadio(index, detail) {
      // 周选择 weeklySelection
      // 月选择 monthlySelection
      this.form[detail][index].weeklySelection = [];
      this.form[detail][index].monthlySelection = [];
      this.form[detail][index].integralTimeRuleDetails = [];
      this.form[detail][index].integralTimeRuleDetails.push({
        time: null,
        datetime: null,
      });
    },

    init() {
      this.listRule();
      this.listOilName();
      this.getStationList();
    },

    // 获取油品
    listOilName() {
      // getOilList({
      //   enterpriseId: 246,
      // }).then((response) => {
      //   this.oilNameOptions = response.rows;
      // });
      let enterpriseId;
      if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
        enterpriseId = this.presentEnterprise.enterpriseId;
      }
      oilName({
        enterpriseId,
      }).then((response) => {
        this.oilNameOptions = response.data;
      });
    },

    // 查询油站
    getStationList() {
      const enterpriseId = this.presentEnterprise?.enterpriseId
        ? this.presentEnterprise.enterpriseId
        : null;
      listEnterpriseStation({ enterpriseId, status: "1" }).then((res) => {
        this.stationList = res;
      });
    },

    getData() {
      this.form.noOilItemsDetail.forEach((item, index) => {
        if (item.stationId) {
          this.getNonOilCategoryList(item.stationId, index);
        }
        if (item.categoryId) {
          this.getList(item.categoryId, item.stationId, index);
        }
      });
    },

    // 选择了适用油站
    stationIdChang(item, index) {
      this.getNonOilCategoryList(item.stationId, index);
      this.goodList[index] = [];
      this.form.noOilItemsDetail[index].categoryId = [];
      this.form.noOilItemsDetail[index].commodityId = null;
      this.form = { ...this.form };
    },

    // 获取分类列表
    async getNonOilCategoryList(stationId, index) {
      const res = await getNonOilCategoryTreeApi();
      const categoryOptions = [...res.data.children];
      this.dataCategoryList(categoryOptions);
      this.$set(this.categoryOptions, index, categoryOptions);
    },

    dataCategoryList(categoryOptions) {
      categoryOptions.forEach((item) => {
        if (!item.children.length) {
          item.children = null;
        } else {
          this.dataCategoryList(item.children);
        }
      });
    },

    // 选择了分类
    handleChange(value, item, index) {
      const categoryId = value[value.length - 1];
      this.getList(categoryId, item.stationId, index);
      this.form.noOilItemsDetail[index].commodityId = null;
      this.form = { ...this.form };
    },

    // 获取适用商品列表
    async getList(categoryId, stationId, index) {
      let enterpriseId = null;
      if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
        enterpriseId = this.presentEnterprise.enterpriseId;
      }

      const params = {
        categoryId,
        enterpriseId,
        pageNum: 1,
        pageSize: 100,
        stationId,
      };

      const res = await getCommodityListApi(params);

      this.goodList[index] = [...res.rows];
      this.goodList = [...this.goodList];
    },

    // 获取修改获取数据
    listRule() {
      listRuleOne({
        pageNum: 1,
        pageSize: 100,
      }).then((response) => {
        const res = cloneDeep(response);

        const imgFileList = response.data.imgFileList;
        response.data.imgFileList = [];

        this.form = response.data;
        this.form.showType = String(response.data.showType);
        setTimeout(() => {
          this.form = { ...response.data, imgFileList };
        }, 1000);
        this.form.collectClickCalendar = [];
        this.form.collectClickDay = "";

        if (
          !this.form.itemsDetail ||
          this.form.itemsDetail.length == 0 ||
          !this.form.itemsDetail[0].id
        ) {
          this.itemsDetailData();
        } else {
          // 周选择 weeklySelection
          // 月选择 monthlySelection
          this.form.itemsDetail.forEach((item, index) => {
            if (res.data.itemsDetail[index].weeklySelection) {
              this.form.itemsDetail[index].weeklySelection =
                res.data.itemsDetail[index].weeklySelection.split(",");
            } else {
              this.form.itemsDetail[index].weeklySelection = [];
            }
            if (res.data.itemsDetail[index].monthlySelection) {
              this.form.itemsDetail[index].monthlySelection =
                res.data.itemsDetail[index].monthlySelection.split(",");
            } else {
              this.form.itemsDetail[index].monthlySelection = [];
            }

            if (
              res.data.itemsDetail[index].integralTimeRuleDetails.length === 0
            ) {
              this.form.itemsDetail[index].integralTimeRuleDetails = [
                {
                  id: null,
                  ruleDetailId: null,
                  ruleDetailIdtime: null,
                  datetime: null,
                },
              ];
            } else {
              let integralTimeRuleDetails = [];
              cloneDeep(
                res.data.itemsDetail[index].integralTimeRuleDetails
              ).forEach((item) => {
                // 生效开始时间  effectiveTimeStart       time
                // 生效结束时间   effectiveTimeEnd        time
                // 生效指定开始时间   effectiveDateStart   datetime
                // 生效指定结束时间   effectiveDateEnd     datetime
                if (item.effectiveTimeStart) {
                  integralTimeRuleDetails.push({
                    id: item.id,
                    ruleDetailId: item.ruleDetailId,
                    time: [item.effectiveTimeStart, item.effectiveTimeEnd],
                  });
                } else if (item.effectiveDateStart) {
                  integralTimeRuleDetails.push({
                    id: item.id,
                    ruleDetailId: item.ruleDetailId,
                    datetime: [item.effectiveDateStart, item.effectiveDateEnd],
                  });
                }
              });
              this.form.itemsDetail[index].integralTimeRuleDetails =
                integralTimeRuleDetails;
            }
          });
        }

        if (
          !this.form.noOilItemsDetail ||
          this.form.noOilItemsDetail.length == 0 ||
          !this.form.noOilItemsDetail[0].id
        ) {
          this.noOilItemsDetailData();
        } else {
          // 周选择 weeklySelection
          // 月选择 monthlySelection
          this.form.noOilItemsDetail.forEach((item, index) => {
            if (res.data.noOilItemsDetail[index].weeklySelection) {
              this.form.noOilItemsDetail[index].weeklySelection =
                res.data.noOilItemsDetail[index].weeklySelection.split(",");
            } else {
              this.form.noOilItemsDetail[index].weeklySelection = [];
            }
            if (res.data.noOilItemsDetail[index].monthlySelection) {
              this.form.noOilItemsDetail[index].monthlySelection =
                res.data.noOilItemsDetail[index].monthlySelection.split(",");
            } else {
              this.form.noOilItemsDetail[index].monthlySelection = [];
            }

            if (
              res.data.noOilItemsDetail[index].integralTimeRuleDetails
                .length === 0
            ) {
              this.form.noOilItemsDetail[index].integralTimeRuleDetails = [
                {
                  id: null,
                  ruleDetailId: null,
                  ruleDetailIdtime: null,
                  datetime: null,
                },
              ];
            } else {
              let integralTimeRuleDetails = [];
              cloneDeep(
                res.data.noOilItemsDetail[index].integralTimeRuleDetails
              ).forEach((item) => {
                // 生效开始时间  effectiveTimeStart       time
                // 生效结束时间   effectiveTimeEnd        time
                // 生效指定开始时间   effectiveDateStart   datetime
                // 生效指定结束时间   effectiveDateEnd     datetime
                if (item.effectiveTimeStart) {
                  integralTimeRuleDetails.push({
                    id: item.id,
                    ruleDetailId: item.ruleDetailId,
                    time: [item.effectiveTimeStart, item.effectiveTimeEnd],
                  });
                } else if (item.effectiveDateStart) {
                  integralTimeRuleDetails.push({
                    id: item.id,
                    ruleDetailId: item.ruleDetailId,
                    datetime: [item.effectiveDateStart, item.effectiveDateEnd],
                  });
                }
              });
              this.form.noOilItemsDetail[index].integralTimeRuleDetails =
                integralTimeRuleDetails;
            }
          });
        }

        if (this.form.datePicker == "1" || this.form.datePicker == "2") {
          this.form.collectClickCalendar = this.form.datePickerTime
            .split(",")
            .map(parseFloat);
        } else if (this.form.datePicker == "3") {
          if (!this.form.datePickerTime || !this.form.datePickerTime.length) {
            this.form.collectClickDay = [];
          } else {
            this.form.collectClickDay = this.form.datePickerTime.split(",");
          }
        }

        if (this.form.oilIntegralFlag == "0") {
          this.itemsDetailData();
        }

        if (this.form.noOilIntegralFlag == "0") {
          this.noOilItemsDetailData();
        }

        this.form = { ...this.form };

        this.getData();
      });
    },

    timeClear() {
      this.form.collectClickCalendar = [];
      this.form.collectClickDay = [];
    },

    //添加行
    addItemItemsDetail() {
      this.form.itemsDetail.push({
        // 适用油品
        oilId: null,
        // 规则类型
        ruleType: null,
        // 满 元（L） 开始积分
        ruleTerms: null,
        // 每消费  元
        saleAmt: null,
        // 获得  积分
        integral: null,
        // 获得  成长值
        growValue: null,
        // 生效时间
        effectiveTimeType: "permanent_validity",
        // 生效时间时间段
        integralTimeRuleDetails: [
          {
            time: null,
            datetime: null,
          },
        ],
        monthlySelection: [],
        weeklySelection: [],
      });
    },

    //添加行
    addItemNoOilItemsDetail() {
      this.form.noOilItemsDetail.push({
        // 适用油站
        stationId: null,
        // 适用分类
        categoryId: null,
        // 适用商品
        commodityId: null,
        // 规则类型
        ruleType: null,
        // 满 元（L） 开始积分
        ruleTerms: null,
        // 每消费  元
        saleAmt: null,
        // 获得  积分
        integral: null,
        // 获得  成长值
        growValue: null,
        // 生效时间
        effectiveTimeType: "permanent_validity",
        // 生效时间时间段
        integralTimeRuleDetails: [
          {
            time: null,
            datetime: null,
          },
        ],
        monthlySelection: [],
        weeklySelection: [],
      });
    },

    // 删除行
    delItem(index, detail) {
      if (this.form[detail].length > 1) {
        this.form[detail].splice(index, 1);
        this.goodList.splice(index, 1);
      } else {
        if (detail == "noOilItemsDetail") {
          this.goodList = [];
          this.noOilItemsDetailData();
        } else {
          this.itemsDetailData();
        }
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },

    // 积分获取规则请选择了油品
    oilNameChang(item, index) {
      item.grade = null;
      item.gradeList = [];
      this.form = { ...this.form };
      gradeList({
        oilId: item.oilId,
      }).then((response) => {
        item.gradeList = response.rows;
        this.form = {
          ...this.form,
        };
      });
      queryOilType(item.oilId).then((res) => {
        item.oilType = res;
        this.form = {
          ...this.form,
        };
      });
    },

    handleRemove(file, fileList) {
      this.form.imgFileList = fileList;
    },

    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 1;
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      }
      return isLt5M;
    },

    //上传成功
    handlepaymentSuccess(response, file, fileList) {
      this.form.imgFileList = [
        ...this.form.imgFileList,
        {
          name: file.name,
          url: response.url,
        },
      ];
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.datePicker == "1" || this.form.datePicker == "2") {
            this.form.datePickerTime =
              this.form.collectClickCalendar.toString();
          } else {
            this.form.datePickerTime = this.form.collectClickDay.toString();
          }

          const form = cloneDeep(this.form);

          if (this.form.oilIntegralFlag == "1") {
            // 周选择 weeklySelection
            // 月选择 monthlySelection
            form.itemsDetail.forEach((item) => {
              item.weeklySelection = item.weeklySelection.join(",");
              item.monthlySelection = item.monthlySelection.join(",");
              const integralTimeRuleDetails = cloneDeep(
                item.integralTimeRuleDetails
              );
              item.integralTimeRuleDetails = [];
              integralTimeRuleDetails.forEach((itemDetails) => {
                if (itemDetails.time) {
                  item.integralTimeRuleDetails.push({
                    effectiveTimeStart: itemDetails.time[0],
                    effectiveTimeEnd: itemDetails.time[1],
                  });
                } else if (itemDetails.datetime) {
                  item.integralTimeRuleDetails.push({
                    effectiveDateStart: itemDetails.datetime[0],
                    effectiveDateEnd: itemDetails.datetime[1],
                  });
                }
              });
            });
          } else {
            form.itemsDetail = [];
          }

          if (this.form.noOilIntegralFlag == "1") {
            // 周选择 weeklySelection
            // 月选择 monthlySelection
            form.noOilItemsDetail.forEach((item) => {
              item.weeklySelection = item.weeklySelection.join(",");
              item.monthlySelection = item.monthlySelection.join(",");
              const integralTimeRuleDetails = cloneDeep(
                item.integralTimeRuleDetails
              );
              item.integralTimeRuleDetails = [];
              integralTimeRuleDetails.forEach((itemDetails) => {
                if (itemDetails.time) {
                  item.integralTimeRuleDetails.push({
                    effectiveTimeStart: itemDetails.time[0],
                    effectiveTimeEnd: itemDetails.time[1],
                  });
                } else if (itemDetails.datetime) {
                  item.integralTimeRuleDetails.push({
                    effectiveDateStart: itemDetails.datetime[0],
                    effectiveDateEnd: itemDetails.datetime[1],
                  });
                }
              });

              let categoryId;
              if (typeof item.categoryId == "object") {
                categoryId = item.categoryId[item.categoryId.length - 1];
              } else {
                categoryId = item.categoryId;
              }

              item.categoryId = categoryId;
            });
          } else {
            form.noOilItemsDetail = [];
          }

          if (this.form.id != null) {
            updateRule(form).then((response) => {
              this.msgSuccess("更新成功");
              this.listRule();
            });
          } else {
            addRule(form).then((response) => {
              this.msgSuccess("新增成功");
              this.listRule();
            });
          }
        }
      });
    },

    clickCalendar(index) {
      if (this.form.collectClickCalendar.indexOf(index) === -1) {
        this.form.collectClickCalendar.push(index);
      } else if (this.form.collectClickCalendar.indexOf(index) > -1) {
        const temp = this.form.collectClickCalendar.findIndex((ele) => {
          return ele == index;
        });
        this.form.collectClickCalendar.splice(temp, 1);
      }
      this.$refs.form.validateField("datePicker");
      this.form = { ...this.form };
    },
  },
};
</script>

<style scoped lang="scss">
.flex_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  .flex_item {
    width: 49%;
    margin-right: 1%;
  }
}
::v-deep.el-checkbox-button {
  margin-right: 10px;

  .el-checkbox-button__inner {
    text-align: center;
    line-height: 32px;
    padding: 0px;
    width: 32px;
    height: 32px;
    color: #409eff;
    border: 1px solid #409eff !important;
    border-radius: 5px;
  }
}

::v-deep.el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #fff !important;
  background-color: #409eff;
}

.hover-style:hover {
  width: 38px;
  height: 38px;
  color: white;
  border-radius: 5px;
  background-color: #409eff;
}

.intRule {
  padding: 10px 0px 10px 10px;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.intRule-oi {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.intRule-oidiv {
  height: 50px;
  display: flex;
  align-items: center;
}

::v-deep.position-integralActivity-card {
  display: flex;
}

.position-card {
  margin: 0px 0px 5px 30px;
}

.position-switch {
  margin: 0px 0px 5px 45px;
}

.form-datePicker-div {
  display: flex;
  flex-wrap: wrap;
  background-color: #f5f7fa;
  margin-top: 30px;
}

.form-datePicker-item {
  width: 38px;
  height: 38px;
  color: #409eff;
  background-color: #fff;
  border: 1px solid #409eff;
  border-radius: 5px;
  text-align: center;
}

.form-datePicker-item-true {
  width: 38px;
  height: 38px;
  color: #fff;
  background-color: #409eff;
  border: 1px solid #409eff;
  border-radius: 5px;
  text-align: center;
}

.div-card {
  padding: 30px 0px 0px 30px;
  border-radius: 10px;
}

.div-card-margin {
  margin-top: 20px;
}

.div-integralFlag {
  display: flex;
  align-items: center;
  height: 45px;
}

.add-danger {
  width: 100px;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18%;
}
</style>
